<template>
    <div class="brand_page">
        <div class="content_year-list">
            <div class="maxWidth1400 flex items-center h-[75px]">
                <span class="mr-[28px]">{{ $t("news.text1") }}</span>
                <ul>
                    <li
                        :class="[
                            'font-bold mr-[20px]',
                            year === state.activeYear ? 'active' : '',
                        ]"
                        v-for="year in state.yearList"
                        :key="year"
                        @click="handleYearClick(year)"
                    >
                        {{ year }}
                    </li>
                </ul>
            </div>
        </div>
        <div class="article_content maxWidth1400" v-if="state.totalList.length">
            <div class="article_img-list">
                <div
                    class="img_content-box"
                    v-for="item in state.dataList"
                    @click="handleGoDetail(item.id)"
                >
                    <div class="overflow-hidden mb-[22px] h-[480px]">
                        <CustomImage :srcUrl="item.titleImage" />
                    </div>
                    <div class="img_title">{{ item.title }}</div>
                    <div class="img_date">
                        {{ handleDate(item.publishDate)[4] }}
                    </div>
                </div>
            </div>
            <div class="maxWidth1400 article_page">
                <span @click="handleChangePage('prev')"
                    ><el-icon :size="20" color="#000"> <ArrowLeft /> </el-icon
                ></span>

                <ul>
                    <li
                        v-for="itemPage in pageNum"
                        :class="{ active: itemPage === currentPage }"
                        @click="handleChangePage(itemPage)"
                    >
                        {{ itemPage }}
                    </li>
                </ul>
                <span @click="handleChangePage('next')"
                    ><el-icon :size="20" color="#000"> <ArrowRight /> </el-icon
                ></span>
            </div>
            <!-- <div class="article_page">
                <span
                    ><el-icon :size="20" color="#000"> <ArrowLeft /> </el-icon
                ></span>

                <ul>
                    <li
                        v-for="itemPage in pageNum"
                        :class="{ active: itemPage === currentPage }"
                    >
                        {{ itemPage }}
                    </li>
                </ul>
                <span
                    ><el-icon :size="20" color="#000"> <ArrowRight /> </el-icon
                ></span>
            </div> -->
        </div>
        <el-empty :image-size="200" :description="$t('common.noData')" v-else />
    </div>
</template>

<script setup>
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";

const { locale } = useI18n();
const route = useRoute();
const router = useRouter();
let currentPage = ref(1);
let pageNum = ref(1);
let pageSize = ref(5);
const state = reactive({
    totalList: [],
    dataList: [],
    yearList: [],
    activeYear: "",
});

const handleYearClick = async (year) => {
    state.activeYear = year;
    currentPage.value = 1;
    pageNum.value = 1;
    const res = await useGET("/v1/aricle/page", {
        query: {
            type: ARTICLE_TYPE_MAP[route.query.key],
            page: 1,
            limit: 99,
            year,
        },
    });
    if (res?.rows.length) {
        pageNum.value = Math.ceil(res.total / pageSize.value);
        state.dataList = [...res.rows.slice(0, pageSize.value)];
    } else {
        state.dataList = [];
    }
};
// 首次加载获取文章列表
const getArticleList = async (type, opt) => {
    const res = await useGET("/v1/aricle/page", {
        query: {
            type,
            page: 1,
            limit: 99,
            ...opt,
        },
    });
    if (res?.rows.length) {
        pageNum.value = Math.ceil(res.total / pageSize.value);
        state.totalList = res.rows.map((item) => {
            item.year = handleDate(item.publishDate)[0];
            return item;
        });
        state.yearList = [...new Set(state.totalList.map((item) => item.year))];
        state.dataList = [...state.totalList.slice(0, pageSize.value)];
    } else {
        state.totalList = [];
        state.dataList = [];
        state.yearList = [];
    }
};

// 切换页码
const handleChangePage = (page) => {
    if (page === "prev") {
        currentPage.value = currentPage.value === 1 ? 1 : currentPage.value - 1;
    } else if (page === "next") {
        currentPage.value =
            currentPage.value === pageNum.value
                ? pageNum.value
                : currentPage.value + 1;
    } else {
        currentPage.value = page;
    }
    state.dataList = state.totalList.slice(
        (currentPage.value - 1) * pageSize.value,
        currentPage.value * pageSize.value
    );
};

// 跳转新闻详情页
const handleGoDetail = (id) => {
    if (id) router.push(`/detail?id=${id}`);
};

onMounted(() => {
    getArticleList(ARTICLE_TYPE_MAP[route.query.key]);
});

// 监听语言变化，重新获取文章数据
watch(
    () => locale.value,
    (val) => {
        getArticleList(ARTICLE_TYPE_MAP[route.query.key]);
    }
);
</script>

<style lang="scss" scoped>
.article_img-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: -40px;
    .img_content-box {
        &:nth-child(4n + 1) {
            margin-left: 0;
        }
        width: calc(25% - 30px);
        margin-bottom: 40px;
        margin-left: 40px;
        cursor: pointer;
        &:hover {
            img {
                transform: scale(1.06);
            }
            .img_title,
            .img_date {
                color: #0058ce;
            }
        }
        img {
            transition: all 0.6s ease;
            object-fit: cover;
            width: 100%;
        }
        .img_title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
            transition: all 0.4s ease;
            white-space: nowrap;
            display: block;
            -webkit-box-orient: inherit;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .img_date {
            font-size: 14px;
        }
    }
}
@media screen and (max-width: 1500px) {
    .img_content-box > div {
        height: 360px;
    }
}
</style>
